<template>
  <!--  -->
  <div class="measure-map">
    <div class="map-box">
      <div id="container" class="container"></div>
	  <div class="btnb">
        <button @click="addMarker">查看天气情况</button>
      </div>
      <div class="weatherBox" v-if="weatherArr">
        <p style="font-size: 20px">{{ weatherArr.city }}天气列表</p>
        <span>数据最新更新时间：{{ weatherArr.reportTime }}</span>
        <div
          class="weather-che"
          v-for="ele in weatherArr.forecasts"
          :key="ele.date"
        >
          <span>日期：{{ ele.date }}</span
          ><br />
          <span>星期：{{ ele.week }}</span
          ><br />
          <span>日间天气：{{ ele.dayWeather }}</span
          ><br />
          <span>夜间天气：{{ ele.nightWeather }}</span
          ><br />
          <span>日间气温：{{ ele.dayTemp }}</span
          ><br />
          <span>夜间气温：{{ ele.nightTemp }}</span
          ><br />
          <span>日间风向：{{ ele.dayWindDir }}</span
          ><br />
          <span>夜间风向：{{ ele.nightWindDir }}</span
          ><br />
          <span>日间风力：{{ ele.dayWindPower }}</span
          ><br />
          <span>夜间风力：{{ ele.nightWindPower }}</span>
          <el-divider></el-divider>
        </div>
      </div>
    </div>
    <div class="logoBox">
	<div class="map-tools">
	<button @click="ZoomOUT">放大</button>
	<button @click="ZoomIN">缩小</button>
	<button @click="Fill">全局</button>
		<label>日期查询&nbsp;<input type="date" id="to-date" value="2024-06-01"></label>
		<br/>
		<br/>
		<label for="type">Geometry type &nbsp;</label>
		<select id="type" ref="typeSelect" @change="onTypeChange">
		<option value="None">None</option>
		<option value="Point">Point</option>
		<option value="LineString">LineString</option>
		<option value="Polygon">Polygon</option>
		<option value="Circle">Circle</option>
		<option value="Ellpise">Ellpise</option>
		</select>
		</div>
      <h5>图例</h5>
        <div>
          <img
            src="https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/icon_qingtian0520.png"
            alt=""
          />
          <span>正常天气</span>
        </div>
        <div>
          <img
            src="https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/高温0520.png"
            alt=""
          />
          <span>高温预警</span>
        </div>
        <div>
          <img
            src="https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/低温0520.png"
            alt=""
          />
          <span>低温预警</span>
        </div>
        <div>
          <img
            src="https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/大风0520.png"
            alt=""
          />
          <span>大风预警</span>
        </div>
        <div>
          <img
            src="https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/baoyu0520 .png"
            alt=""
          />
          <span>暴雨预警</span>
        </div>
      </div>
  </div>
</template>

<script
  type="text/javascript"
  src="https://webapi.amap.com/maps?v=1.4.15&key=84f61226c5c3819011a303ef5c321e5f&plugin=AMap.MouseTool,AMap.HawkEye,AMap.DistrictSearch,AMap.Scale,AMap.ToolBar,AMap.ControlBar,AMap.ImageLayer"
></script>
<script>
export default {
  data() {
    return {
      map: null,
      mouseTool: null,
      radios: null,
      options: [],
      value: null,
      cityData: [
        {
          Mcity: "四川省",
          city: "成都市",
          address: "成都市",
          jing: 104.066541,
          wei: 30.572269,
        },
        {
          Mcity: "四川省",
          city: "成都市",
          address: "锦江区",
          jing: 104.080989,
          wei: 30.657689,
        },
        {
          Mcity: "四川省",
          city: "成都市",
          address: "青羊区",
          jing: 104.062499,
          wei: 30.674406,
        },
        {
          Mcity: "四川省",
          city: "成都市",
          address: "金牛区",
          jing: 104.117422,
          wei: 30.763102,
        },
        {
          Mcity: "四川省",
          city: "成都市",
          address: "武侯区",
          jing: 104.04339,
          wei: 30.641982,
        },
        {
          Mcity: "四川省",
          city: "成都市",
          address: "成华区",
          jing: 104.101255,
          wei: 30.660122,
        },
        {
          Mcity: "四川省",
          city: "成都市",
          address: "龙泉驿区",
          jing: 104.274632,
          wei: 30.556507,
        },
        {
          Mcity: "四川省",
          city: "成都市",
          address: "青白江区",
          jing: 104.250877,
          wei: 30.878681,
        },
        {
          Mcity: "四川省",
          city: "成都市",
          address: "新都区",
          jing: 104.158705,
          wei: 30.823499,
        },
        {
          Mcity: "四川省",
          city: "成都市",
          address: "温江区",
          jing: 103.837104,
          wei: 30.69046,
        },
        {
          Mcity: "四川省",
          city: "成都市",
          address: "双流区",
          jing: 103.951908,
          wei: 30.333027,
        },
        {
          Mcity: "四川省",
          city: "成都市",
          address: "郫都区",
          jing: 103.901092,
          wei: 30.795854,
        },
        {
          Mcity: "四川省",
          city: "成都市",
          address: "金堂县",
          jing: 104.412005,
          wei: 30.862017,
        },
        {
          Mcity: "四川省",
          city: "成都市",
          address: "郫县",
          jing: 103.886629,
          wei: 30.808481,
        },
        {
          Mcity: "四川省",
          city: "成都市",
          address: "大邑县",
          jing: 103.511875,
          wei: 30.572269,
        },
        {
          Mcity: "四川省",
          city: "成都市",
          address: "蒲江县",
          jing: 103.506498,
          wei: 30.196789,
        },
        {
          Mcity: "四川省",
          city: "成都市",
          address: "新津县",
          jing: 103.811345,
          wei: 30.410222,
        },
        {
          Mcity: "四川省",
          city: "都江堰市",
          address: "都江堰市",
          jing: 103.650219,
          wei: 30.975943,
        },
        {
          Mcity: "四川省",
          city: "彭州市",
          address: "彭州市",
          jing: 103.958013,
          wei: 30.990165,
        },
        {
          Mcity: "四川省",
          city: "邛崃市",
          address: "邛崃市",
          jing: 103.464156,
          wei: 30.410275,
        },
        {
          Mcity: "四川省",
          city: "崇州市",
          address: "崇州市",
          jing: 103.673001,
          wei: 30.630122,
        },
        {
          Mcity: "四川省",
          city: "简阳市",
          address: "简阳市",
          jing: 104.546773,
          wei: 30.410754,
        },
        {
          Mcity: "四川省",
          city: "自贡市",
          address: "自贡市",
          jing: 104.778442,
          wei: 29.33903,
        },
        {
          Mcity: "四川省",
          city: "自贡市",
          address: "自流井区",
          jing: 104.777191,
          wei: 29.33743,
        },
        {
          Mcity: "四川省",
          city: "自贡市",
          address: "贡井区",
          jing: 104.715117,
          wei: 29.345546,
        },
        {
          Mcity: "四川省",
          city: "自贡市",
          address: "大安区",
          jing: 104.773968,
          wei: 29.363634,
        },
        {
          Mcity: "四川省",
          city: "自贡市",
          address: "沿滩区",
          jing: 104.874073,
          wei: 29.272581,
        },
        {
          Mcity: "四川省",
          city: "自贡市",
          address: "荣县",
          jing: 104.417388,
          wei: 29.44541,
        },
        {
          Mcity: "四川省",
          city: "自贡市",
          address: "富顺县",
          jing: 104.975048,
          wei: 29.18143,
        },
        {
          Mcity: "四川省",
          city: "攀枝花市",
          address: "攀枝花市",
          jing: 101.718637,
          wei: 26.582347,
        },
        {
          Mcity: "四川省",
          city: "攀枝花市",
          address: "仁和区",
          jing: 101.738528,
          wei: 26.497765,
        },
        {
          Mcity: "四川省",
          city: "攀枝花市",
          address: "米易县",
          jing: 102.110339,
          wei: 26.890689,
        },
        {
          Mcity: "四川省",
          city: "攀枝花市",
          address: "盐边县",
          jing: 101.855071,
          wei: 26.683213,
        },
        {
          Mcity: "四川省",
          city: "泸州市",
          address: "泸州市",
          jing: 105.442258,
          wei: 28.87181,
        },
        {
          Mcity: "四川省",
          city: "泸州市",
          address: "江阳区",
          jing: 105.435009,
          wei: 28.878818,
        },
        {
          Mcity: "四川省",
          city: "泸州市",
          address: "纳溪区",
          jing: 105.371151,
          wei: 28.773428,
        },
        {
          Mcity: "四川省",
          city: "泸州市",
          address: "龙马潭区",
          jing: 105.437765,
          wei: 28.913221,
        },
        {
          Mcity: "四川省",
          city: "泸州市",
          address: "泸县",
          jing: 105.381893,
          wei: 29.151534,
        },
        {
          Mcity: "四川省",
          city: "泸州市",
          address: "合江县",
          jing: 105.831067,
          wei: 28.811203,
        },
        {
          Mcity: "四川省",
          city: "泸州市",
          address: "叙永县",
          jing: 105.444765,
          wei: 28.155801,
        },
        {
          Mcity: "四川省",
          city: "泸州市",
          address: "古蔺县",
          jing: 105.812602,
          wei: 28.038802,
        },
        {
          Mcity: "四川省",
          city: "德阳市",
          address: "德阳市",
          jing: 104.397894,
          wei: 31.126855,
        },
        {
          Mcity: "四川省",
          city: "德阳市",
          address: "旌阳区",
          jing: 104.416943,
          wei: 31.142498,
        },
        {
          Mcity: "四川省",
          city: "德阳市",
          address: "罗江区",
          jing: 104.510249,
          wei: 31.317045,
        },
        {
          Mcity: "四川省",
          city: "德阳市",
          address: "中江县",
          jing: 104.678749,
          wei: 31.033051,
        },
        {
          Mcity: "四川省",
          city: "德阳市",
          address: "罗江县",
          jing: 104.510249,
          wei: 31.317045,
        },
        {
          Mcity: "四川省",
          city: "广汉市",
          address: "广汉市",
          jing: 104.282331,
          wei: 30.976165,
        },
        {
          Mcity: "四川省",
          city: "什邡市",
          address: "什邡市",
          jing: 104.167501,
          wei: 31.12678,
        },
        {
          Mcity: "四川省",
          city: "绵竹市",
          address: "绵竹市",
          jing: 104.22075,
          wei: 31.338077,
        },
        {
          Mcity: "四川省",
          city: "绵阳市",
          address: "绵阳市",
          jing: 104.679114,
          wei: 31.46745,
        },
        {
          Mcity: "四川省",
          city: "绵阳市",
          address: "涪城区",
          jing: 104.750215,
          wei: 31.47083,
        },
        {
          Mcity: "四川省",
          city: "绵阳市",
          address: "游仙区",
          jing: 104.766393,
          wei: 31.473779,
        },
        {
          Mcity: "四川省",
          city: "绵阳市",
          address: "安州区",
          jing: 104.567187,
          wei: 31.534886,
        },
        {
          Mcity: "四川省",
          city: "绵阳市",
          address: "三台县",
          jing: 105.094586,
          wei: 31.095979,
        },
        {
          Mcity: "四川省",
          city: "绵阳市",
          address: "盐亭县",
          jing: 105.389453,
          wei: 31.208363,
        },
        {
          Mcity: "四川省",
          city: "绵阳市",
          address: "梓潼县",
          jing: 105.170845,
          wei: 31.642718,
        },
        {
          Mcity: "四川省",
          city: "绵阳市",
          address: "北川羌族自治县",
          jing: 104.46797,
          wei: 31.617203,
        },
        {
          Mcity: "四川省",
          city: "绵阳市",
          address: "北川县",
          jing: 104.46797,
          wei: 31.617203,
        },
        {
          Mcity: "四川省",
          city: "绵阳市",
          address: "平武县",
          jing: 104.555583,
          wei: 32.409675,
        },
        {
          Mcity: "四川省",
          city: "江油市",
          address: "江油市",
          jing: 104.745877,
          wei: 31.778025,
        },
        {
          Mcity: "四川省",
          city: "广元市",
          address: "广元市",
          jing: 105.843357,
          wei: 32.435435,
        },
        {
          Mcity: "四川省",
          city: "广元市",
          address: "利州区",
          jing: 105.845218,
          wei: 32.433898,
        },
        {
          Mcity: "四川省",
          city: "广元市",
          address: "昭化区",
          jing: 105.964121,
          wei: 32.322788,
        },
        {
          Mcity: "四川省",
          city: "广元市",
          address: "朝天区",
          jing: 105.890445,
          wei: 32.643982,
        },
        {
          Mcity: "四川省",
          city: "广元市",
          address: "旺苍县",
          jing: 106.289905,
          wei: 32.228917,
        },
        {
          Mcity: "四川省",
          city: "广元市",
          address: "青川县",
          jing: 105.238842,
          wei: 32.575485,
        },
        {
          Mcity: "四川省",
          city: "广元市",
          address: "剑阁县",
          jing: 105.524766,
          wei: 32.287723,
        },
        {
          Mcity: "四川省",
          city: "广元市",
          address: "苍溪县",
          jing: 105.934801,
          wei: 31.732432,
        },
        {
          Mcity: "四川省",
          city: "遂宁市",
          address: "遂宁市",
          jing: 105.592898,
          wei: 30.532847,
        },
        {
          Mcity: "四川省",
          city: "遂宁市",
          address: "船山区",
          jing: 105.568297,
          wei: 30.525475,
        },
        {
          Mcity: "四川省",
          city: "遂宁市",
          address: "安居区",
          jing: 105.456342,
          wei: 30.355379,
        },
        {
          Mcity: "四川省",
          city: "遂宁市",
          address: "蓬溪县",
          jing: 105.70757,
          wei: 30.757575,
        },
        {
          Mcity: "四川省",
          city: "遂宁市",
          address: "射洪县",
          jing: 105.388405,
          wei: 30.870986,
        },
        {
          Mcity: "四川省",
          city: "遂宁市",
          address: "大英县",
          jing: 105.236904,
          wei: 30.594337,
        },
        {
          Mcity: "四川省",
          city: "内江市",
          address: "内江市",
          jing: 105.058433,
          wei: 29.580228,
        },
        {
          Mcity: "四川省",
          city: "内江市",
          address: "东兴区",
          jing: 105.07549,
          wei: 29.592756,
        },
        {
          Mcity: "四川省",
          city: "内江市",
          address: "威远县",
          jing: 104.668879,
          wei: 29.52744,
        },
        {
          Mcity: "四川省",
          city: "内江市",
          address: "资中县",
          jing: 104.851944,
          wei: 29.764059,
        },
        {
          Mcity: "四川省",
          city: "乐山市",
          address: "乐山市",
          jing: 103.765568,
          wei: 29.552106,
        },
        {
          Mcity: "四川省",
          city: "乐山市",
          address: "市中区",
          jing: 103.76133,
          wei: 29.555375,
        },
        {
          Mcity: "四川省",
          city: "乐山市",
          address: "沙湾区",
          jing: 103.549991,
          wei: 29.413091,
        },
        {
          Mcity: "四川省",
          city: "乐山市",
          address: "五通桥区",
          jing: 103.818009,
          wei: 29.406932,
        },
        {
          Mcity: "四川省",
          city: "乐山市",
          address: "金口河区",
          jing: 103.078621,
          wei: 29.244345,
        },
        {
          Mcity: "四川省",
          city: "乐山市",
          address: "犍为县",
          jing: 103.949326,
          wei: 29.208171,
        },
        {
          Mcity: "四川省",
          city: "乐山市",
          address: "井研县",
          jing: 104.069726,
          wei: 29.651287,
        },
        {
          Mcity: "四川省",
          city: "乐山市",
          address: "夹江县",
          jing: 103.571657,
          wei: 29.73763,
        },
        {
          Mcity: "四川省",
          city: "乐山市",
          address: "沐川县",
          jing: 103.902335,
          wei: 28.956647,
        },
        {
          Mcity: "四川省",
          city: "乐山市",
          address: "峨边彝族自治县",
          jing: 103.262048,
          wei: 29.230425,
        },
        {
          Mcity: "四川省",
          city: "乐山市",
          address: "马边彝族自治县",
          jing: 103.546348,
          wei: 28.835521,
        },
        {
          Mcity: "四川省",
          city: "峨眉山市",
          address: "峨眉山市",
          jing: 103.484504,
          wei: 29.601199,
        },
        {
          Mcity: "四川省",
          city: "峨眉山市",
          address: "天城区",
          jing: 103.89528,
          wei: 30.798276,
        },
        {
          Mcity: "四川省",
          city: "峨眉山市",
          address: "南充市",
          jing: 106.110698,
          wei: 30.837793,
        },
        {
          Mcity: "四川省",
          city: "峨眉山市",
          address: "顺庆区",
          jing: 106.092399,
          wei: 30.796486,
        },
        {
          Mcity: "四川省",
          city: "峨眉山市",
          address: "高坪区",
          jing: 106.118808,
          wei: 30.781623,
        },
        {
          Mcity: "四川省",
          city: "峨眉山市",
          address: "嘉陵区",
          jing: 106.071793,
          wei: 30.758748,
        },
        {
          Mcity: "四川省",
          city: "峨眉山市",
          address: "南部县",
          jing: 106.036584,
          wei: 31.347467,
        },
        {
          Mcity: "四川省",
          city: "峨眉山市",
          address: "营山县",
          jing: 106.56542,
          wei: 31.076461,
        },
        {
          Mcity: "四川省",
          city: "峨眉山市",
          address: "蓬安县",
          jing: 106.412151,
          wei: 31.029097,
        },
        {
          Mcity: "四川省",
          city: "峨眉山市",
          address: "仪陇县",
          jing: 106.303042,
          wei: 31.271562,
        },
        {
          Mcity: "四川省",
          city: "峨眉山市",
          address: "西充县",
          jing: 105.900878,
          wei: 30.995669,
        },
        {
          Mcity: "四川省",
          city: "阆中市",
          address: "阆中市",
          jing: 106.005047,
          wei: 31.558357,
        },
        {
          Mcity: "四川省",
          city: "眉山市",
          address: "眉山市",
          jing: 103.848538,
          wei: 30.075439,
        },
        {
          Mcity: "四川省",
          city: "眉山市",
          address: "东坡区",
          jing: 103.831752,
          wei: 30.042345,
        },
        {
          Mcity: "四川省",
          city: "眉山市",
          address: "彭山区",
          jing: 103.87295,
          wei: 30.193056,
        },
        {
          Mcity: "四川省",
          city: "眉山市",
          address: "仁寿县",
          jing: 104.134082,
          wei: 29.99563,
        },
        {
          Mcity: "四川省",
          city: "眉山市",
          address: "洪雅县",
          jing: 103.372863,
          wei: 29.90489,
        },
        {
          Mcity: "四川省",
          city: "眉山市",
          address: "丹棱县",
          jing: 103.512733,
          wei: 30.014448,
        },
        {
          Mcity: "四川省",
          city: "眉山市",
          address: "青神县",
          jing: 103.846688,
          wei: 29.831358,
        },
        {
          Mcity: "四川省",
          city: "宜宾市",
          address: "宜宾市",
          jing: 104.643215,
          wei: 28.751768,
        },
        {
          Mcity: "四川省",
          city: "宜宾市",
          address: "翠屏区",
          jing: 104.644534,
          wei: 28.758563,
        },
        {
          Mcity: "四川省",
          city: "宜宾市",
          address: "宜宾县",
          jing: 104.533213,
          wei: 28.690045,
        },
        {
          Mcity: "四川省",
          city: "宜宾市",
          address: "长宁县",
          jing: 104.914158,
          wei: 28.577349,
        },
        {
          Mcity: "四川省",
          city: "宜宾市",
          address: "高县",
          jing: 104.518187,
          wei: 28.435036,
        },
        {
          Mcity: "四川省",
          city: "宜宾市",
          address: "珙县",
          jing: 104.713083,
          wei: 28.443674,
        },
        {
          Mcity: "四川省",
          city: "宜宾市",
          address: "屏山县",
          jing: 104.156008,
          wei: 28.708446,
        },
        {
          Mcity: "四川省",
          city: "广安市",
          address: "广安市",
          jing: 106.633212,
          wei: 30.455961,
        },
        {
          Mcity: "四川省",
          city: "广安市",
          address: "广安区",
          jing: 106.641608,
          wei: 30.474003,
        },
        {
          Mcity: "四川省",
          city: "广安市",
          address: "前锋区",
          jing: 106.893277,
          wei: 30.4963,
        },
        {
          Mcity: "四川省",
          city: "广安市",
          address: "岳池县",
          jing: 106.440114,
          wei: 30.537863,
        },
        {
          Mcity: "四川省",
          city: "广安市",
          address: "武胜县",
          jing: 106.295764,
          wei: 30.348772,
        },
        {
          Mcity: "四川省",
          city: "广安市",
          address: "邻水县",
          jing: 106.93038,
          wei: 30.334769,
        },
        {
          Mcity: "四川省",
          city: "广安市",
          address: "华蓥市",
          jing: 106.783088,
          wei: 30.390435,
        },
        {
          Mcity: "四川省",
          city: "达州市",
          address: "达州市",
          jing: 107.468023,
          wei: 31.209571,
        },
        {
          Mcity: "四川省",
          city: "达州市",
          address: "通川区",
          jing: 107.504517,
          wei: 31.214724,
        },
        {
          Mcity: "四川省",
          city: "达州市",
          address: "达川区",
          jing: 107.511845,
          wei: 31.196118,
        },
        {
          Mcity: "四川省",
          city: "达州市",
          address: "宣汉县",
          jing: 107.727191,
          wei: 31.353835,
        },
        {
          Mcity: "四川省",
          city: "达州市",
          address: "开江县",
          jing: 107.868736,
          wei: 31.082987,
        },
        {
          Mcity: "四川省",
          city: "达州市",
          address: "大竹县",
          jing: 107.204744,
          wei: 30.736266,
        },
        {
          Mcity: "四川省",
          city: "达州市",
          address: "渠县",
          jing: 106.972996,
          wei: 30.836659,
        },
        {
          Mcity: "四川省",
          city: "达州市",
          address: "万源市",
          jing: 108.034657,
          wei: 32.081631,
        },
        {
          Mcity: "四川省",
          city: "雅安市",
          address: "雅安市",
          jing: 103.013261,
          wei: 29.980537,
        },
        {
          Mcity: "四川省",
          city: "雅安市",
          address: "雨城区",
          jing: 103.033083,
          wei: 30.005447,
        },
        {
          Mcity: "四川省",
          city: "雅安市",
          address: "名山区",
          jing: 103.109185,
          wei: 30.069954,
        },
        {
          Mcity: "四川省",
          city: "雅安市",
          address: "荥经县",
          jing: 102.846738,
          wei: 29.792931,
        },
        {
          Mcity: "四川省",
          city: "雅安市",
          address: "汉源县",
          jing: 102.645453,
          wei: 29.347187,
        },
        {
          Mcity: "四川省",
          city: "雅安市",
          address: "石棉县",
          jing: 102.359462,
          wei: 29.227874,
        },
        {
          Mcity: "四川省",
          city: "雅安市",
          address: "天全县",
          jing: 102.758317,
          wei: 30.066713,
        },
        {
          Mcity: "四川省",
          city: "雅安市",
          address: "芦山县",
          jing: 102.92826,
          wei: 30.144084,
        },
        {
          Mcity: "四川省",
          city: "雅安市",
          address: "宝兴县",
          jing: 102.814531,
          wei: 30.368126,
        },
        {
          Mcity: "四川省",
          city: "巴中市",
          address: "巴中市",
          jing: 106.747477,
          wei: 31.867903,
        },
        {
          Mcity: "四川省",
          city: "巴中市",
          address: "巴州区",
          jing: 106.768878,
          wei: 31.851478,
        },
        {
          Mcity: "四川省",
          city: "巴中市",
          address: "恩阳区",
          jing: 106.655347,
          wei: 31.786691,
        },
        {
          Mcity: "四川省",
          city: "巴中市",
          address: "通江县",
          jing: 107.245033,
          wei: 31.911705,
        },
        {
          Mcity: "四川省",
          city: "巴中市",
          address: "南江县",
          jing: 106.828697,
          wei: 32.346589,
        },
        {
          Mcity: "四川省",
          city: "巴中市",
          address: "平昌县",
          jing: 107.104008,
          wei: 31.560874,
        },
        {
          Mcity: "四川省",
          city: "巴中市",
          address: "资阳市",
          jing: 104.627636,
          wei: 30.128901,
        },
        {
          Mcity: "四川省",
          city: "巴中市",
          address: "雁江区",
          jing: 104.677096,
          wei: 30.10821,
        },
        {
          Mcity: "四川省",
          city: "巴中市",
          address: "安岳县",
          jing: 105.335613,
          wei: 30.097246,
        },
        {
          Mcity: "四川省",
          city: "巴中市",
          address: "乐至县",
          jing: 105.019916,
          wei: 30.275487,
        },
        {
          Mcity: "四川省",
          city: "巴中市",
          address: "宜宾地区",
          jing: 104.643215,
          wei: 28.751768,
        },
        {
          Mcity: "四川省",
          city: "巴中市",
          address: "南充地区",
          jing: 106.110698,
          wei: 30.837793,
        },
        {
          Mcity: "四川省",
          city: "巴中市",
          address: "南充县",
          jing: 106.110698,
          wei: 30.837793,
        },
        {
          Mcity: "四川省",
          city: "巴中市",
          address: "达川地区",
          jing: 107.511845,
          wei: 31.196118,
        },
        {
          Mcity: "四川省",
          city: "达川市",
          address: "达川市",
          jing: 107.511845,
          wei: 31.196118,
        },
        {
          Mcity: "四川省",
          city: "达川市",
          address: "巴中县",
          jing: 106.747477,
          wei: 31.867903,
        },
        {
          Mcity: "四川省",
          city: "达川市",
          address: "白沙工农区",
          jing: 104.160392,
          wei: 30.469654,
        },
        {
          Mcity: "四川省",
          city: "达川市",
          address: "雅安地区",
          jing: 103.013261,
          wei: 29.980537,
        },
        {
          Mcity: "四川省",
          city: "达川市",
          address: "阿坝藏族羌族自治州",
          jing: 102.224653,
          wei: 31.899413,
        },
        {
          Mcity: "四川省",
          city: "马尔康市",
          address: "马尔康市",
          jing: 102.206504,
          wei: 31.905813,
        },
        {
          Mcity: "四川省",
          city: "马尔康市",
          address: "马尔康区",
          jing: 102.206504,
          wei: 31.905813,
        },
        {
          Mcity: "四川省",
          city: "马尔康市",
          address: "汶川县",
          jing: 103.590387,
          wei: 31.476822,
        },
        {
          Mcity: "四川省",
          city: "马尔康市",
          address: "理县",
          jing: 103.166853,
          wei: 31.436473,
        },
        {
          Mcity: "四川省",
          city: "马尔康市",
          address: "茂县",
          jing: 103.853522,
          wei: 31.681154,
        },
        {
          Mcity: "四川省",
          city: "马尔康市",
          address: "松潘县",
          jing: 103.604698,
          wei: 32.655325,
        },
        {
          Mcity: "四川省",
          city: "马尔康市",
          address: "九寨沟县",
          jing: 104.243841,
          wei: 33.252056,
        },
        {
          Mcity: "四川省",
          city: "马尔康市",
          address: "金川县",
          jing: 102.063829,
          wei: 31.476277,
        },
        {
          Mcity: "四川省",
          city: "马尔康市",
          address: "小金县",
          jing: 102.364373,
          wei: 30.999031,
        },
        {
          Mcity: "四川省",
          city: "马尔康市",
          address: "黑水县",
          jing: 102.990108,
          wei: 32.061895,
        },
        {
          Mcity: "四川省",
          city: "马尔康市",
          address: "壤塘县",
          jing: 100.978526,
          wei: 32.265796,
        },
        {
          Mcity: "四川省",
          city: "马尔康市",
          address: "阿坝县",
          jing: 101.706655,
          wei: 32.902459,
        },
        {
          Mcity: "四川省",
          city: "马尔康市",
          address: "若尔盖县",
          jing: 102.961798,
          wei: 33.575892,
        },
        {
          Mcity: "四川省",
          city: "马尔康市",
          address: "红原县",
          jing: 102.544405,
          wei: 32.790891,
        },
        {
          Mcity: "四川省",
          city: "马尔康市",
          address: "甘孜藏族自治州",
          jing: 101.96231,
          wei: 30.04952,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "康定市",
          jing: 101.957146,
          wei: 29.998436,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "泸定县",
          jing: 102.234618,
          wei: 29.91416,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "丹巴县",
          jing: 101.890358,
          wei: 30.878577,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "九龙县",
          jing: 101.507294,
          wei: 29.000348,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "雅江县",
          jing: 101.014425,
          wei: 30.031533,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "道孚县",
          jing: 101.125237,
          wei: 30.979545,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "炉霍县",
          jing: 100.676372,
          wei: 31.39179,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "甘孜县",
          jing: 99.992671,
          wei: 31.622934,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "新龙县",
          jing: 100.311369,
          wei: 30.939169,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "德格县",
          jing: 98.580915,
          wei: 31.806118,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "白玉县",
          jing: 98.824182,
          wei: 31.209913,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "石渠县",
          jing: 98.1029,
          wei: 32.97896,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "色达县",
          jing: 100.332743,
          wei: 32.268129,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "理塘县",
          jing: 100.269818,
          wei: 29.996049,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "巴塘县",
          jing: 99.110712,
          wei: 30.004677,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "乡城县",
          jing: 99.798435,
          wei: 28.931172,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "稻城县",
          jing: 100.298403,
          wei: 29.037007,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "得荣县",
          jing: 99.286335,
          wei: 28.713037,
        },
        {
          Mcity: "四川省",
          city: "康定市",
          address: "凉山彝族自治州",
          jing: 102.267335,
          wei: 27.88161,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "西昌市",
          jing: 102.264449,
          wei: 27.894504,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "木里藏族自治县",
          jing: 101.280206,
          wei: 27.928835,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "盐源县",
          jing: 101.509188,
          wei: 27.422645,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "德昌县",
          jing: 102.17567,
          wei: 27.402839,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "会理县",
          jing: 102.244683,
          wei: 26.655026,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "会东县",
          jing: 102.577961,
          wei: 26.634669,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "宁南县",
          jing: 102.759634,
          wei: 27.066384,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "普格县",
          jing: 102.540901,
          wei: 27.376413,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "布拖县",
          jing: 102.811631,
          wei: 27.706192,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "金阳县",
          jing: 103.248772,
          wei: 27.696861,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "昭觉县",
          jing: 102.842611,
          wei: 28.014088,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "喜德县",
          jing: 102.412518,
          wei: 28.306726,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "冕宁县",
          jing: 102.17701,
          wei: 28.549657,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "越西县",
          jing: 102.50768,
          wei: 28.639801,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "甘洛县",
          jing: 102.771749,
          wei: 28.966069,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "美姑县",
          jing: 103.13218,
          wei: 28.32864,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "雷波县",
          jing: 103.571696,
          wei: 28.262683,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "广安地区",
          jing: 106.633212,
          wei: 30.455961,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "巴中地区",
          jing: 106.747477,
          wei: 31.867903,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "眉山地区",
          jing: 103.848538,
          wei: 30.075439,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "眉山县",
          jing: 103.848538,
          wei: 30.075439,
        },
        {
          Mcity: "四川省",
          city: "西昌市",
          address: "资阳地区",
          jing: 104.627636,
          wei: 30.128901,
        },
      ],
      cityArr: [
        {
          shen: "广东省",
          city: "广州市",
          qu: "白云区",
          jing: 113.27,
          wei: 23.17,
        },
        {
          shen: "广东省",
          city: "广州市",
          qu: "从化区",
          jing: 113.58,
          wei: 23.55,
        },
        {
          shen: "广东省",
          city: "广州市",
          qu: "番禺区",
          jing: 113.35,
          wei: 22.95,
        },
        {
          shen: "广东省",
          city: "广州市",
          qu: "海珠区",
          jing: 113.25,
          wei: 23.1,
        },
        {
          shen: "广东省",
          city: "广州市",
          qu: "花都区",
          jing: 113.22,
          wei: 23.4,
        },
        {
          shen: "广东省",
          city: "广州市",
          qu: "黄埔区",
          jing: 113.45,
          wei: 23.1,
        },
        {
          shen: "广东省",
          city: "广州市",
          qu: "荔湾区",
          jing: 113.23,
          wei: 23.13,
        },
        {
          shen: "广东省",
          city: "广州市",
          qu: "南沙区",
          jing: 113.25,
          wei: 23.12,
        },
        {
          shen: "广东省",
          city: "广州市",
          qu: "天河区",
          jing: 113.35,
          wei: 23.12,
        },
        {
          shen: "广东省",
          city: "广州市",
          qu: "越秀区",
          jing: 113.27,
          wei: 23.13,
        },
        {
          shen: "广东省",
          city: "广州市",
          qu: "增城区",
          jing: 113.83,
          wei: 23.3,
        },
      ],
      weatherArr: null,

      marker: null, //点位
      markers: [],
      // 弹框内容
      title: "",
      content: [],
      infoWindow: null,
    };
  },

  created() {},

  mounted() {
    this.initMap();
    // this.addMarker();
    this.getWeather();
  },

  methods: {
    initMap() {
      //初始化地图
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 10, //级别
        zooms: [1, 30],
        center: [113.27, 23.13], //中心点坐标
        viewMode: "3D", //使用3D视图
        lang: this.lang,
        mapStyle: "amap://styles/light",
        infoWindow: null,
      });
      this.mouseTool = new AMap.MouseTool(this.map);
    },

    getWeather() {
      for (let i = 0; i < this.cityArr.length; i++) {
        AMap.plugin("AMap.Weather", () => {
          var weather = new AMap.Weather();
          //未来4天天气预报
          weather.getForecast(this.cityArr[i].qu, (err, data) => {
            if (err) {
              return;
            }
            this.cityArr[i].weather = data;
          });
        });
      }
      console.log("区域数据", this.cityArr);
      // this.addMarker();

    },

    handleChange(value) {
      this.map.clearMap();
      var che = this.cityData.find((ele) => ele.address === value[1]);
      console.log(value, che);
      this.map.setCenter([che.jing, che.wei]); //设置地图中心点

      AMap.plugin("AMap.Weather", () => {
        var weather = new AMap.Weather();
        //查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
        weather.getLive(value[1], (err, data) => {
          if (!err) {
            console.log("data", data);

            var str = [];
            str.push("<h4 >未来4天气候" + "</h4><hr>");
            str.push("<p>城市/区：" + data.city + "</p>");
            str.push("<p>城区编码：" + data.adcode + "</p>");

            var marker = new AMap.Marker({
              map: this.map,
              position: [che.jing, che.wei],
            });
            var infoWin = new AMap.InfoWindow({
              content:
                '<div class="info" style="position:inherit;margin-bottom:0;">' +
                str.join("") +
                '</div><div class="sharp"></div>',
              isCustom: true,
              offset: new AMap.Pixel(0, -37),
            });
            infoWin.open(this.map, marker.getPosition());
            marker.on("mouseover", () => {
              infoWin.open(this.map, marker.getPosition());
            });
          }
        });
        //未来4天天气预报
        weather.getForecast(value[1], (err, data) => {
          if (err) {
            return;
          }

          console.log("三天天气", data);
          this.weatherArr = data;
        });
      });
    },

    // 添加点集
    addMarker() {
      for (let i = 0; i < this.cityArr.length; i++) {
        var url =
          "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/icon_qingtian0520.png";

        if (this.cityArr[i].weather) {
          var gw = null;
          var dw = null;
          var by = null;

          by = this.cityArr[i].weather.forecasts.findIndex(
            (ele) => ele.dayWeather === "雷阵雨"
          );
          gw = this.cityArr[i].weather.forecasts.findIndex(
            (ele) => ele.dayTemp >= 35
          );
          dw = this.cityArr[i].weather.forecasts.findIndex(
            (ele) => ele.nightTemp <= 10
          );

          if (gw !== -1) {
            url =
              "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/高温0520.png";
          } else if (dw !== -1) {
            url =
              "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/低温0520.png";
          } else if (by !== -1) {
            url =
              "https://mp-b0bd9cd4-ad06-4cf0-b1a3-ea2e46e926bc.cdn.bspapp.com/cloudstorage/baoyu0520 .png";
          }
          console.log(gw, dw, by);
        }

        // 循环点坐标
        // 注意这里一定得用 let
        let marker = new AMap.Marker({
          // 自定义图标
          icon: new AMap.Icon({
            image: url,
            size: new AMap.Size(45, 45),
            imageSize: new AMap.Size(45, 45),
          }),
          map: this.map,
          position: [this.cityArr[i].jing, this.cityArr[i].wei],
          extData: this.cityArr[i],
        });

        this.markers.push(marker);
        AMap.event.addListener(marker, "click", () => {
          this.title = this.cityArr[i].qu;

          (this.content = [
            "区域编码：" + this.cityArr[i].weather.adcode,
            "数据获取时间：" + this.cityArr[i].weather.reportTime,
          ]),
            (this.infoWindow = new AMap.InfoWindow({
              isCustom: true, //使用自定义窗体
              content: this.createInfoWindow(
                this.title,
                this.content.join("<br/>"),
                this.cityArr[i]
              ),
              offset: new AMap.Pixel(16, -45),
            }));
          this.infoWindow.open(this.map, marker.getPosition());
        });
      }
      this.map.setFitView();
    },

    //渲染弹框
    createInfoWindow(title, content,che) {
      // console.log("11111111");
      var info = document.createElement("div");
      info.className = "custom-info input-card content-window-card";

      //可以通过下面的方式修改自定义窗体的宽高
      //info.style.width = "400px";
      // 定义顶部标题
      var top = document.createElement("div");
      var titleD = document.createElement("div");
      var closeX = document.createElement("img");
      top.className = "info-top";
      titleD.innerHTML = title;
      closeX.src = "https://webapi.amap.com/images/close2.gif";
      closeX.onclick = this.closeInfoWindow;

      top.appendChild(titleD);
      top.appendChild(closeX);
      info.appendChild(top);

      // 定义中部内容
      var middle = document.createElement("div");
      middle.className = "info-middle";
      middle.style.backgroundColor = "white";
      middle.innerHTML = content;

      var openMap = document.createElement("div");
      openMap.className = "openMap";
      openMap.innerHTML = "查看未来天气情况";

      openMap.onclick = () => {
        this.openMapFun(che);
      };

      middle.appendChild(openMap);

      info.appendChild(middle);

      // 定义底部内容
      var bottom = document.createElement("div");
      bottom.className = "info-bottom";
      bottom.style.position = "relative";
      bottom.style.top = "0px";
      bottom.style.margin = "0 auto";
      var sharp = document.createElement("img");
      sharp.src = "https://webapi.amap.com/images/sharp.png";
      bottom.appendChild(sharp);
      info.appendChild(bottom);
      return info;
    },
    openMapFun(che){
      console.log(che)
      this.weatherArr=che.weather
    },
    // 关闭弹框
    closeInfoWindow() {
      this.map.clearInfoWindow();
      this.searchIndustry = null;
    },
	zoomIn() {
		        if (this.multiples >= 2) {
		          return;
		        }
		        this.multiples += 0.25;
		      },
		      // 缩小
	zoomOut() {
		        if (this.multiples <= 1) {
		          return;
		        }
		        this.multiples -= 0.25;
	},
  },
};
</script>

<style>
.logoBox {
  position: fixed;
  top: 260px;
  left: 250px;
  z-index: 99;
  background-color: white;
  padding: 10px;
  border-radius: 5px;
}
.logoBox div {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.logoBox img {
  width: 40px;
  margin-right: 10px;
}
/* 弹框样式 */
.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  width: auto;
  padding: 0;
}

.content-window-card p {
  height: 2rem;
}

.custom-info {
  border: solid 1px silver;
  width: 280px;
  background-color: white;
}

.map-tools{
    position: fixed;
    top: 80px;
    left: 300px;
    z-index: 9;
    background-color: rgba(255, 255, 255,0.5);
}

div.info-top {
  position: relative;
  background: none repeat scroll 0 0 #f9f9f9;
  border-bottom: 1px solid #ccc;
  border-radius: 5px 5px 0 0;
}

div.info-top div {
  display: inline-block;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

div.info-middle {
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
}
div.info-middle img {
  width: 100px;
  height: 70px;
  padding-bottom: 10px;
}

div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}

div.info-bottom img {
  position: relative;
  z-index: 104;
}

span {
  margin-left: 5px;
  font-size: 11px;
}

.info-middle img {
  float: left;
  margin-right: 6px;
}

.xiangxi {
  color: #555;
}

/* 地图元件样式 */
.weatherBox {
  position: fixed;
  right: 1rem;
  top: 12rem;
  padding: 10px;
  background: white;
  z-index: 999;
  border: 1px solid #ccc;
  border-radius: 5px;
  height: 60vh;
  overflow: auto;
}
.btn {
  width: 6rem;
  margin: 0 1rem 0 4.5rem;
}
.btnb {
  position: fixed;
  right: 1rem;
  top: 75px;
  padding: 10px;
  background: white;
  z-index: 999;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>
